// 页面一刷新就获取用户基本信息
$(() => {
  function getUserInfo () {
    $.ajax({
      type: "get",
      url: "/my/userinfo",
      headers: {
        // token的请求头
        Authorization: localStorage.getItem('token')
      },
      success: function (res) {
        if (res.status != 0) return layer.msg('获取用户信息失败!');
        layer.msg('获取用户信息成功!');
        const { data } = res
        // 把用户信息到本地存储
        localStorage.setItem('userInfo', JSON.stringify(data))
        render(data)
        // 不要在当前的ajax内部来判断用户认证是否失败， 因为这么写要写很多次相同的逻辑
        // ajax提供了一个叫拦截器的东西  ①请求拦截器(在发ajax请求之前触发)  ②响应拦截器(拿到后端数据, 还没有执行success函数时候触发)
      }
    });
  }
  // 获取用户信息
  getUserInfo()
  // 点击退出要做的事
  $('#btnLogout').on('click', function () {
    // 弹框
    layer.confirm('is not?', { icon: 3, title: '提示' }, function (index) {
      // 清token
      localStorage.removeItem('token')
      // 跳转到登录
      location.href = '/login.html'
      layer.close(index);
    });
  })

  // 单独声明一个渲染头像的函数
  function render ({ nickname, username, user_pic }) {
    // ①有nickname和username    先看有没有nickname，再看username 渲染
    const name = nickname || username
    // 渲染
    $('#welcome').html('欢迎 ' + name)
    // ②看有没user_pic值, 有值渲染图片，文字盒子影藏   没有值， 渲染文字盒子（首字母大写），图片盒子影藏
    if (user_pic) {
      // 有值 Img渲
      $('.layui-nav-img').attr('src', user_pic)
      // 文字盒子影藏
      $('.text-avatar').hide()
    } else {
      // 搞到name第一个大写字母
      const first = name[0].toUpperCase()
      // 渲染到文字盒子
      $('.text-avatar').html(first)
      // 图片盒子影藏
      $('.layui-nav-img').hide()
    }
  }
  window.render = render
})